<script lang="ts" setup>
import pagesJson from '@/pages.json'

interface Props {
  tabbar?: any
  zIndex?: number
}

const props = withDefaults(defineProps<Props>(), {
  tabbar: () => ({
    color: '#86909c',
    selectedColor: '#165DFF',
    backgroundColor: 'rgba(255,255,255,0.9)',
    list: [],
  }),
  zIndex: 999,
})

const tabBar = computed(() => Object.assign(pagesJson.tabBar, props.tabbar))
const current = computed(() => tabBar.value.list.findIndex(item => `/${item.pagePath}` === uni.$uv.page()))

function handleTabBarRouter(item) {
  // 实现不同的跳转方式
  if (item.type === 'switchTab') {
    uni.switchTab({
      url: `/${item.pagePath}`,
    })
  }
  if (item.type === 'navigateTo') {
    uni.navigateTo({
      url: `/${item.pagePath}`,
    })
  }
}

onMounted(() => {
  uni.hideTabBar().catch(() => new Promise(() => { }))
})
</script>

<template>
  <view>
    <view class="fixed bottom-0 left-0 w-full" :style="{ zIndex }">
      <view
        class="shadow-[0rpx_-2rpx_8rpx_0rpx_rgba(0,0,0,0.03)] backdrop-blur-4px"
        :style="[{ backgroundColor: tabBar.backgroundColor }]"
      >
        <view us-items-center us-flex us-justify-center class="h-56px">
          <template v-for="(item, index) in tabBar.list" :key="item.id">
            <view us-flex us-items-center us-flex-1 us-flex-col @click="handleTabBarRouter(item)">
              <view us-flex us-items-center us-justify-center>
                <image
                  class="h-26px w-26px" :src="current === index ? item.selectedIconPath : item.iconPath"
                  mode="aspectFit"
                />
              </view>
              <text
                class="mt-6rpx text-12px font-400"
                :style="[{ color: current === index ? tabBar.selectedColor : tabBar.color }]"
              >
                {{ item.text }}
              </text>
            </view>
          </template>
        </view>
        <uv-safe-bottom />
      </view>
    </view>
    <view>
      <view class="h-56px" />
      <uv-safe-bottom />
    </view>
  </view>
</template>

<style lang="scss" scoped></style>
